<template>
  <div class="head">
    <a-row type="flex" justify="center" align="middle">
      <a-col :xs="22" :md="20">
        <a-row type="flex" justify="space-between" align="middle">
          <div class="left">
            <router-link to="/">
              <img src="@/assets/logo2.png" alt="logo">
            </router-link>
          </div>
          <div class="right">
            <div class="search" type="flex">
              <a-input-search
                placeholder="地址/哈希/区块链表"
                @search="onSearch"
                enterButton
              />
              <a-button class="wallet" type="link">钱包</a-button>
            </div>
            <div class="nav">
              <router-link to="/">
                首页
              </router-link>
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  区块链 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;">区块</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">交易</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">统计</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">账户</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  代币 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;">PRC-20 最佳代币</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">查看PRC-20转移</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  中文 <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;">中文</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">英文</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'Head',
  data () {
    return {

    }
  },
  methods: {
    onSearch (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
  .head {
    padding: 0.9375rem 0;
    background: -webkit-linear-gradient(left, rgb(92, 16, 172), rgb(13, 13, 89) 100%);
    margin-bottom: 5px;

    .left {
      width: 30%;
      text-align: left;
      margin-left: 235px;
      img {
        width: 100%;
        min-width: 7.8125rem;
        max-width: 11.5625rem;
        height: auto;
      }
    }
    .right {
      text-align: right;
      margin-right: 200px;
      .search {
        /deep/ .ant-input-group-wrapper {
          width: auto;
          .ant-input {
            background: rgba(187, 179, 247, 0.4);
            border: 0;
            font-size: 1rem;
            letter-spacing: 0.1rem;
            border-radius: 10px 0 0 10px;
          }
          ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: rgb(255, 255, 255);
            font-size: 14px;
          }
          :-ms-input-placeholder { /* IE 10+ */
            color: rgb(255, 255, 255);
            font-size: 14px;
          }
          .ant-input-group-addon {
            background: #6753ff;
            border-radius: 0 10px 10px 0;
            .ant-input-search-button {
              background: #6753ff;
              /*border-radius: 0.25rem;*/
              padding: 0 1.25rem;
            }
            .ant-btn {
              border: 0px;
              font-size: 1.35rem;
              border-radius: 0 10px 10px 0;
            }
          }
        }
        .wallet {
          color: #fff;
          padding: 0;
          margin-left: .75rem;
          background: transparent;
          border-color: transparent;
        }
      }
      .nav {
        padding-top: 1rem ;
        text-align: right;
        a {
          color: #fff;
          font-size: .8rem;
        }
        .ant-dropdown-link {
          padding-left: 1.25rem;
        }
      }
    }
  }
</style>
